<template>
<el-menu class="navbar" :default-active="String($route.meta.index)" :collapse="isCollapse" background-color="#545c64" text-color="#fff">
  <el-menu-item v-for="(item,index) in menuList" :key="index" :index="String(index)" @click="nav(item)">
    <icon :name="item.icon" class="icon"></icon>
    <span slot="title">{{item.name}}</span>
  </el-menu-item>
  <i class="el-icon-caret-left icon-close" v-if="!isCollapse" @click="open"></i>
  <i class="el-icon-caret-right icon-open" v-if="isCollapse" @click="close"></i>
</el-menu>
</template>
<script>
import Icon from "vue-awesome/components/Icon";
import menuList from "../../store/menu";
export default {
  data() {
    return {
      isCollapse: true,
      menuList: menuList
    };
  },
  methods: {
    nav(item) {
      this.$router.push(item.link);
    },
    open() {
      this.isCollapse = true;
    },
    close() {
      this.isCollapse = false;
    }
  },
  components: {
    Icon
  }
};
</script>
<style lang="scss" scoped>
.navbar:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
}
.icon {
  margin-right: 0.5rem;
}
.icon-close,
.icon-open {
  position: absolute;
  top: 50%;
  font-size: 22px;
  color: #bbb;
  right: 0;
  transform: translateY(-50%);
}
</style>
